<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.深入探讨一下v-for</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<h2>汽车数据（v-for遍历对象）</h2>
			<ul>
				<li v-for="(value,key,index) in car">
					{{value}} - {{key}} - {{index}}
				</li>
			</ul>

			<hr>

			<h2>一个字符串消息（v-for遍历字符串）</h2>
			<ul>
				<li v-for="(char,index) in msg">
					{{char}} - {{index}}
				</li>
			</ul>

			<h2>遍历指定次数</h2>
			<ul>
				<li v-for="(number,index) in 10">
					{{number}} - {{index}}
				</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#demo',
			data:{
				car:{
					name:'迈腾',
					price:'20W'
				},
				msg:'hello,atguigu'
			}
		})
	</script>
</html>